<template>
    <div style="height: 95%;width: 100%;display:flex;justify-content:center;padding-top: 20px">
        <!--弹框DIV 设置弹框的大小的地方-->
        <div style="background: #fff;width: 700px;height: 600px;box-shadow: #D3DCE6 0px 0px 20px;">
            <div style="height:520px;border: #1C84C6;margin-top: 25px" class="scrollbar">
                <div style="height: 30px;">
                    <!--标题-->
                    <span style="font-size: 18px;margin-left: 25px;">
                        线索信息
                    </span>
                    <span style="margin-left: 530px">
                        <i slot="suffix" style="font-size: 30px;color: #D3DCE6" class="el-icon-close" @click="gotoQx"></i>
                    </span>
                </div>
                <!--height:91%;表单在弹框显示多长-->
                <el-scrollbar style="height:91%;padding-top: 20px;">
                    <div class="shugan"></div>
                    <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                    <!--表单-->
                    <el-form :rules="rules" :model="clues" ref="clues" style="margin-top:30px; margin-left: 30px;" size="mini">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="clueName">
                                    <label slot="label" style="font-size: 13px">线索名称：</label>
                                    <el-input v-model="clues.clueName"></el-input>
                                    <el-input v-model="clues.clueSz" style="display: none;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="clueLinkmanname">
                                    <label slot="label" style="font-size: 13px">联系人：</label>
                                    <el-input v-model="clues.clueLinkmanname"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px" prop="clueSource">
                                    <label slot="label" style="font-size: 13px">线索来源：</label>
                                    <el-select v-model="clues.clueSource" placeholder="请选择" style="width:250px;">
                                        <el-option v-for="item in xsly" :key="item.value"
                                                   :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="empId">
                                    <label style="font-size: 13px">负责人：</label>
                                    <el-popover style="width: 700px; height: 450px;" placement="right"
                                                trigger="click" v-model="kehu">
                                        <span style="font-size:20px;">关联员工模块</span>
                                        <el-input @keyup.enter.native="initData" v-model="empinput"
                                                  style="width: 210px; margin-left: 200px; margin-bottom: 10px;">
                                            <i slot="suffix" class="el-input__icon el-icon-search" @click="initData"></i>
                                        </el-input>
                                        <el-table highlight-current-row border ref="emplist" :data="emplist">
                                            <el-table-column type="selection" width="50" align="center" property="empId"></el-table-column>
                                            <el-table-column width="150" property="empId" label="ID"></el-table-column>
                                            <el-table-column width="150" property="empName" label="姓名"></el-table-column>
                                            <el-table-column width="200" property="depId.depName" label="部门"></el-table-column>
                                        </el-table>
                                        <el-pagination @size-change="handleSizeChange" @current-change="changePage" :current-page.sync="currPage"
                                                       :page-size="pageSize" layout="total, prev, pager, next" :total="totalSize" >
                                        </el-pagination>
                                        <div style="text-align: center;width: 100%" class="dialog-footer">
                                            <el-button type="primary" @click="xzemp">保 存</el-button>
                                            <el-button type="primary" @click="kehu = false">取 消</el-button>
                                        </div>
                                        <el-input v-if="this.xg==0" v-model="clues.empId.empName" placeholder="+添加" slot="reference" :readonly='true' style="width: 250px;"></el-input>
                                    </el-popover>
                                    <el-input v-if="this.xg==1" :disabled="true" v-model="clues.empId.empName" placeholder="+添加" :readonly='true' style="width: 250px;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="cluePhone">
                                    <label style="font-size: 13px">电话：</label>
                                    <el-input v-model="clues.cluePhone"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="clueLinkmansj">
                                    <label style="font-size: 13px">手机：</label>
                                    <el-input v-model="clues.clueLinkmansj"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="clueSite">
                                    <label style="font-size: 13px">地址：</label>
                                    <!--el-cascader级联（城市选择器）-->
                                    <el-cascader v-model="address" :options="options" ref="cascaderAddr" clearable
                                                 style="width: 250px;" filterable @change="handleChange" placeholder="选择地址">
                                    </el-cascader>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="clueEstablishtime">
                                    <label style="font-size: 13px">下次联系时间：</label>
                                    <el-date-picker v-model="clues.clueEstablishtime" align="right"
                                                    type="datetime" style="width: 250px; " placeholder="选择日期"
                                                    :picker-options="pickerOptions">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item style="width:250px;" prop="clueSitexq">
                                    <label style="font-size: 13px">详情地址：</label>
                                    <el-input v-model="clues.clueSitexq"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item style="width:250px;" prop="clueRemark">
                                    <label style="font-size: 13px">备注：</label>
                                    <textarea style="width: 580px;" v-model="clues.clueRemark" placeholder="备注说明"></textarea>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-scrollbar>
                <!--确定按钮 设置了固定定位-->
                <div style="text-align: center;width: 80%;position: absolute;top:635px;left:230px;" class="dialog-footer">
                    <el-button @click="gotoQx">取 消</el-button>
                    <el-button type="primary" @click="yesok('clues')">确 定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Crypto from "../router/secret";
    import cities from '../router/cities.js'
    export default {
        name: "TfyNewClues",
        data(){
            var emp = (rule, value, callback) => {
                if (value.empName === null || value.empName === '') {
                    callback(new Error('请选择负责人'));
                }else {
                    callback()
                }
            };
            var dianhua = (rule, value, callback) => {
                if(!value){
                    callback(new Error('请输入电话号码'));
                }else {
                    if(!/^((0\d{2,3}-\d{7,8})|(1[3584]\d{8}))$/.test(value)){
                        callback(new Error('请输入正确的电话号码'));
                    }else {
                        callback()
                    }
                }
            };
            var shouji = (rule, value, callback) => {
                if(!value){
                    callback(new Error('请输入手机号码'));
                }else {
                    if(!(/^1[3456789]\d{9}$/.test(value))){
                        callback(new Error('请输入正确的手机号码'));
                    }else {
                        callback()
                    }
                }
            };
            return{
                rules: {
                    clueName:[{ required: true, message: '请输入线索名称' , trigger: 'change'},],
                    clueLinkmanname:[{ required: true, message: '请输入联系人' , trigger: 'change'},],
                    clueSource:[{ message: '请选择线索来源' , trigger: 'change'},],
                    empId:[{ validator: emp, required: true, trigger: ['blur','change']},],
                    cluePhone:[{ validator: dianhua, required: true, trigger: ['blur','change']},],
                    clueLinkmansj:[{required: true, validator: shouji, trigger: ['blur','change']},],
                    clueSite:[{ required: true, message: '请选择地址' , trigger: 'change'},],
                    clueEstablishtime:[{ required: true, message: '请选择下次联系时间' , trigger: 'change'},],
                },
                options: cities,//地址cities
                address:[],//地址v-model
                //快捷日期选择器
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }]
                },
                //线索来源
                xsly: [{
                    value: '广告',
                    label: '广告'
                }, {
                    value: '转介绍',
                    label: '转介绍'
                }, {
                    value: '预约上门',
                    label: '预约上门'
                }, {
                    value: '线上注册',
                    label: '线上注册'
                }, {
                    value: '线上询价',
                    label: '线上询价'
                }, {
                    value: '公司资源',
                    label: '公司资源'
                }, {
                    value: '电话咨询',
                    label: '电话咨询'
                }, {
                    value: '邮件咨询',
                    label: '邮件咨询'
                }],
                value: '',
                options2: [{
                    value2: '导入',
                    label: '导入'
                }, {
                    value2: '导出',
                    label: '导出'
                }],
                value2:'',
                //表单
                clues:{
                    clueId:0,
                        empId:{//员工表
                            empId:0,
                            empName:'',
                            depId:{//部门
                                depId:0,
                                depName:'',
                            },
                        },
                    clueName:'',
                    clueSource:'',
                    cluePhone:'',
                    clueMobile:'',
                    clueSite:'',
                    clueSitexq:'',
                    clueEstablishtime:'',
                    clueRemark:'',
                    clueLinkmanname:'',
                    clueLinkmansj:'',
                    clueSz:'',
                },

                kehu:false,//员工弹出框
                empinput:'',//员工弹框搜索框
                emplist:[],//员工表格信息
                pageSize:5,//员工分页页大小
                currPage:1,//员工当前页码，默认为1
                totalSize:0,//员工总记录数
                xg:'',
                split:'',//地址截取
            }
        },
        methods: {
            yesok(formName) {
                if(this.xg != 0){
                    this.addClue();
                }else{
                    this.$refs[formName].validate(valid => {
                        this.print(valid);
                        window.console.log(valid)
                        if (valid) {
                            this.addClue();
                        }else{
                            this.$message({
                                message: '验证不通过！',
                                type: 'warning'
                            });
                            return false;
                        }
                    });
                }
            },
            //确定按钮新增线索
            addClue() {
                if (this.xg == 0) {
                    this.$axios.post("http://localhost:8088/addclue-list", this.clues)
                        .then(() => {
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: '新增成功!',
                            });
                            this.$router.push({
                                path: '/tfyxs'
                            });
                        }).catch(() => {
                            this.$message({
                                showClose: true,
                                message: '新增失败',
                                type: 'error'
                            });
                        })
                } else {
                    this.$axios.post("http://localhost:8088/addclue-list", this.clues)
                        .then(() => {
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: '修改成功!',
                            });
                            this.$router.push({
                                path: '/tfyxs'
                            });
                        }).catch(() => {
                            this.$message({
                                showClose: true,
                                message: '修改失败',
                                type: 'error'
                            });
                    })
                }
            },
            //选择员工确定按钮
            xzemp() {
                this.$refs.emplist.selection.forEach((pro)=>{
                    this.clues.empId=pro;
                    window.console.log("id"+this.clues.empId)
                });
                this.kehu=false;
                this.empinput='';
            },
            //员工查询方法
            initData(){
                this.$axios.post("http://localhost:8088/findemp-list",this.qs.stringify(
                    {search:this.empinput, page:this.currPage, size:this.pageSize,}))
                    .then(v=>{
                        this.emplist = v.data.rows;
                        window.console.log("yg:"+this.emplist)
                        this.totalSize = v.data.total;
                    })
                    .catch()
            },
            changePage(v){
                this.currPage = v;
                this.initData();
            },
            handleSizeChange(val){
                window.console.log('每页${val}条')
                this.initData(1,this.pageSize=val,this.emplist)
            },
            xgxsxq(){//详情线索修改查询
                this.xg = 1;
                var clueId = Crypto.get(unescape(this.$route.query.clueId));
                this.$axios.post("http://localhost:8088/selectxsid-list",this.qs.stringify(
                    {clueId:parseInt(clueId)})).then(v=>{
                    this.clues = v.data;
                }).catch();
            },
            xjkh(){
                this.$router.replace('/xjkh')
            },
            //取消按钮
            gotoQx() {
                this.$router.replace('/tfyxs')
            },

            // 获取省市区地址级联
            handleChange(e, form, thsAreaCode) {
                thsAreaCode = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels// 注意2： 获取label值
                window.console.log(thsAreaCode);// 注意3： 最终结果是个一维数组对象
                window.console.log(thsAreaCode[0] + thsAreaCode[1] + thsAreaCode[2]);
                const checkedNodes = this.$refs['cascaderAddr'].getCheckedNodes();
                window.console.log(checkedNodes[0].pathLabels); // 获取由 label 组成的数组
                //省市区赋值
                this.clues.clueSite = thsAreaCode[0] +'/'+ thsAreaCode[1] +'/'+ thsAreaCode[2];
                this.clues.clueSz = e[0] +'/'+ e[1] +'/'+ e[2];
                this.address=e;
                window.console.log(typeof e);
                window.console.log(e);
                window.console.log("结果1"+e);
                window.console.log("结果2"+form);
                window.console.log("结果3"+thsAreaCode);
            }
        },
        created: function () {
            if(this.$route.query.key!=null){//修改初始化
                this.clues=this.$route.query.key;
                this.xg = 1;
                this.address = this.clues.clueSz.split('/');//
            }
            this.initData();
            if (this.$route.query.clueId){
                this.xgxsxq();
            }
        },
    }
</script>

<style scoped>
    .shugan{
        border-left-color: rgb(70, 205, 207);
        border-left-width: 1.8px;
        height: 10px;
        border-left-style: solid;
        display: inline;
        font-size: 13px;
        margin-left: 25px;
    }

    .el-scrollbar__wrap {
        overflow: scroll;
        width: 120%;
        height: 100%;
    }
</style>